<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="layout-top">
        <div class="layout1">
          <!-- 工单统计 -->
          <div class="workorder">
            <p class="title">
              <span class="left">工单统计</span>
              <span class="right">{{ start1 }} ~ {{ end1 }}</span>
            </p>
            <el-col :span="6"><div class="grid-content bg-purple" />
              <p class="num">{{ workorder.total }}</p>
              <p class="text">工单总数(个)</p>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple" />
              <p class="num">{{ workorder.completedTotal }}</p>
              <p class="text">完成工单(个)</p>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple" />
              <p class="num">{{ workorder.progressTotal?workorder.progressTotal:0 }}</p>
              <p class="text">进行工单(个)</p>
            </el-col>
            <el-col :span="6"><div class="grid-content bg-purple" />
              <p class="num">{{ workorder.cancelTotal }}</p>
              <p class="text">取消工单(个)</p>
            </el-col>
          </div>
          <!-- /工单统计 -->
          <!-- 销售统计 -->
          <div class="sales">
            <p class="title">
              <span class="left">销售统计</span>
              <span class="right">{{ start1 }} ~ {{ end1 }}</span>
            </p>
            <el-col :span="12"><div class="grid-content bg-purple" />
              <p class="num">13510</p>
              <p class="text">订单量(个)</p>
            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple" />
              <p class="num">8.85</p>
              <p class="text">完成工单(个)</p>
            </el-col>
          </div>
          <div class="sales-data" />
        </div>
        <!-- /销售统计 -->
        <!-- 商品热榜 -->
        <div class="layout2">
          <p class="title">
            <span class="left">商品热榜</span>
            <span class="right">{{ start1 }} ~ {{ end1 }}</span>
          </p>
          <el-row v-for="(item,index) in topValues" :key="index" type="flex" class="row-bg top-values">
            <el-col :span="3" :class="index===0?'addBg1':(index===1?'addBg2':(index===2?'addBg3':'addBg4'))">
              <div class="grid-content bg-purple" />{{ index+1 }}</el-col>
            <el-col :span="13"><div class="grid-content bg-purple-light" />{{ item.skuName }}</el-col>
            <el-col :span="8"><div class="grid-content bg-purple" />{{ item.count }}</el-col>
          </el-row>
        </div>
      </div>
      <!-- /商品热榜 -->
      <div class="layout-bottom">
        <!-- 合作商点位数Top5 -->
        <div class="left">
          <div class="leftt">
            <div class="text">合作商点位数Top5</div>
            <div id="myChart" class="myChart" />
            <svg data-v-46f7d62d="" version="1.1" viewBox="0 0 1024 1024" class="more svg-icon svg-fill" style="width: 16px; height: 16px;" @click="$router.push('/point/partners')">
              <defs />
              <path pid="0" d="M512 947.2C271.36 947.2 76.8 752.64 76.8 512S271.36 76.8 512 76.8 947.2 271.36 947.2 512 752.64 947.2 512 947.2M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0m256 435.2c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m-512 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m256 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8" fill=" #5f84ff" />
            </svg>
          </div>
          <div class="rightt">
            <div>
              <p class="num">{{ node }}</p>
              <p class="text">点位数</p>
            </div>
            <p class="num">{{ partner }}</p>
            <p class="text">合作商数</p>
          </div>
        </div>
        <!-- /合作商点位数Top5 -->
        <!-- 异常设备监控 -->
        <div class="right">
          <div class="text">合作商点位数Top5</div>
          <div class="no-data">
            <img src="@/assets/no-data.png" alt="" style="width: 123px; height: 96px;">
            <p>暂无数据</p>
          </div>
          <svg data-v-46f7d62d="" version="1.1" viewBox="0 0 1024 1024" class="more svg-icon svg-fill" style="width: 16px; height: 16px;"><defs /><path pid="0" d="M512 947.2C271.36 947.2 76.8 752.64 76.8 512S271.36 76.8 512 76.8 947.2 271.36 947.2 512 752.64 947.2 512 947.2M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0m256 435.2c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m-512 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8m256 0c-43.52 0-76.8 33.28-76.8 76.8 0 43.52 33.28 76.8 76.8 76.8 43.52 0 76.8-33.28 76.8-76.8 0-43.52-33.28-76.8-76.8-76.8" fill=" #5f84ff" /></svg>
        </div>
      <!-- /异常设备监控 -->
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getTaskReportApi,
  getReportFirstFewApi,
  getNodeCountApi,
  getNodeCollectApi,
  getPartnerCountApi
} from '@/api/user.js'
export default {
  name: 'Dashboard',
  data() {
    return {
      end: this.dayjs().format('YYYY-MM-DD HH:mm:ss'),
      start: this.dayjs().format('YYYY-MM-01 00:00:00'),
      start1: this.dayjs().format('YYYY-MM-01'),
      end1: this.dayjs().format('YYYY-MM-DD'),
      workorder: [],
      topValues: [],
      nodeCollect: [],
      node: '',
      partner: ''
    }
  },
  computed: {
    ...mapGetters([
      'userName'
    ])
  },
  created() {
    this.$store.dispatch('user/getUserInfoFn', 1)
    this.getTaskReportFn()
    this.getReportFirstFewFn()
    this.getNodeCountFn()
    this.getPartnerCountFn()
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    // 获得工单信息
    async getTaskReportFn() {
      try {
        const res = await getTaskReportApi(this.start, this.end)
        // console.log(res)
        this.workorder = res.data[0]
      } catch (err) {
        console.log(err)
      }
    },
    // 获取前几的商品
    async getReportFirstFewFn() {
      try {
        const { data } = await getReportFirstFewApi(10, this.start1, this.end1)
        // console.log(data)
        this.topValues = data
      } catch (err) {
        console.log(err)
      }
    },
    // 合作商点位汇总统计
    async getNodeCollectFn() {
      try {
        const res = await getNodeCollectApi()
        // console.log(res.data)
        this.nodeCollect = res.data
      } catch (err) {
        console.log(err)
      }
    },
    // 获取点位总数
    async getNodeCountFn() {
      try {
        const { data } = await getNodeCountApi()
        // console.log(data)
        this.node = data
      } catch (err) {
        console.log(err)
      }
    },
    // 获取合作商数
    async getPartnerCountFn() {
      try {
        const { data } = await getPartnerCountApi()
        // console.log(data)
        this.partner = data
      } catch (err) {
        console.log(err)
      }
    },
    // 合作商点位数Top5
    async  drawLine() {
    // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      const { data } = await getNodeCollectApi()
      // console.log(data)
      // 绘制图表
      myChart.setOption({
        series: [
          {
            type: 'pie',
            data: data,
            radius: ['30%', '70%'],
            roseType: 'area',
            label: {
              normal: {
                show: true,
                // formatter: '{b}:{c}({d}%)'
                formatter: '{b}:({d}%)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 5px;
  }
}
.layout-top{
 overflow:hidden;
.layout1{
 float: left;
 position: relative;
 width: 990px;
 height: 538px;
//  background-color: aqua;
 margin-right: 15px;
  border-radius: 4%;
.workorder{
  float: left;
  width: 528px;
  height:166px;
  background-color:#e9f3ff;
  background-image: url('~@/assets/bg1.png'),url('~@/assets/bg2.png');
  background-repeat: no-repeat;
  background-position: 0 0,calc(100% - 1px) 100%;
  border-radius: 5%;
  margin-right: 15px;
  .num{
    font-size: 36px;
    color: #072074;
    text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
    font-weight: 700;
    margin: 0 !important;
  }
  .text{
    height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #91a7dc;
    line-height: 17px;
}

}
.sales{
  float: left;
  width: 443px;
  height:166px;
  background: #fbefe8 url('~@/assets/bg3.png') no-repeat calc(100% - 12px) 100%;
  border-radius: 5%;
  .num{
    font-size: 36px;
    color: #ff5757;;
    text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
    font-weight: 700;
    margin: 0 !important;
  }
  .text{
    height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #ff5757;
    line-height: 17px;
}
}
}
.layout2{
  float: left;
  width: 317px;
  height: 538px;
  background-color: #fff;
  border-radius: 5%;
}
}
.sales-data{
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -476px;
  height: 335px;
  width: 952px;
  background-color: #fff;
  border-radius: 3%;
}
.layout1 .el-col{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 margin-top: 10px;
}
.layout-top .title .left{
   margin:15px 10px 0px 20px;
   font-weight: 700;
}
.layout-top .title .right{
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #999;
}
.top-values .el-col{
 margin-top: 10px;
 margin-left: 30px;
}
.top-values{
  margin-bottom: 20px;
}
.addBg1{
  background: url('~@/assets/top1.png') no-repeat;
  padding-left: 7px;
  font-size: 12px;
}
.addBg2{
  background: url('~@/assets/top2.png') no-repeat;
  padding-left: 7px;
  font-size: 12px;
}
.addBg3{
  background: url('~@/assets/top3.png') no-repeat;
  padding-left: 7px;
  font-size: 12px;
}
.addBg4{
  background: url('~@/assets/top4.png') no-repeat;
  padding-left: 3px;
  font-size: 12px;
}
.layout-bottom{
 margin-top: 20px;
 margin-bottom: 20px;
 overflow:hidden;
 .left{
  float: left;
  position: relative;
  width: 767px;
  height: 353px;
  background-color: #fff;
  margin-right: 20px;
  border-radius: 5%;
 }
 .right{
  float: left;
  position: relative;
  width: 542px;
  height: 353px;
  background-color:#fff;
  border-radius: 5%;
  .more{
  position: absolute;
  right: 20px;
  top: 18px;
  }
  .no-data{
    width: 123px;
    height: 123px;
    display: flex;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -62px;
    margin-left: -62px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
 }
}
.myChart{
  margin-top: 30px;
  width: 439px;
  height: 284px;
  background-color: #fff;
}
.layout-bottom .text{
    font-size: 16px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 700;
    color: #333;
    margin: 20px 0 0 15px;
}
.rightt{
    position: absolute;
    top: 90px;
    right: 40px;
    float: right;
    width: 154px;
    height: 230px;
    padding-top: 47px;
    padding-left: 38px;
    background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    .num{
    font-size: 24px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #072074;
    margin: 0 !important;
    }
    .text{
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #000412;
    margin:10px 0 !important;
    }
}
.leftt{
  position: relative;
}
.leftt .more{
  position: absolute;
  right: 20px;
  top: 0;
}
</style>
